uni-app上传图片和文件

如图所示:

上传图片,使用的是uni.chooseImage这个官方api,count 数量根据自己的需求来,我们是最多只能上传9张

          uploadImgEvent(){
		     uni.chooseImage({
		    		count: 10 - this.uploadImgsList.length,
		    		success: (res) => {
		    		this.uploadImgsList.unshift(...res.tempFiles.map(item => ({
		    			picturePath: item.path
		    		})));
		    		if(this.uploadImgsList.length == 10) this.uploadImgsList.pop();
		    		}
		    });
			},
uploads(){
	const _this = this;
return  Promise.all(_this.uploadImgsList.map(item=>_this.uploadImage(item.picturePath))).then(res=>{
			return res.map(item=>({
				 fileName:item.fileName,
				 filePath:item.url
			}))
   })
},
uploadImage(url) {
	return new Promise(async (resolve, reject) => {  
		uni.uploadFile({
			url: await getUploadUrl(), //后台地址
			filePath: url,
		    name: 'file',
			success: (uploadFileRes) => {
				resolve(JSON.parse(uploadFileRes.data)); 
			}
		})
	})
},

提交给后代的数据

           //提交
		   async submitFlood(){
		       let photoList = await this.uploads();
			}

 打印photoList如图:

 上传文件使用的LFile 这个插件 https://ext.dcloud.net.cn/plugin?id=4109

根据官网案例来


		 //上传附件
			uploadFile() {
				const that = this;
				if(that.imgUploadList.length >= 9){
					this.$mHelper.toast('最多上传9张')
					return;
				}
				that.$refs.lFile.upload({
						// #ifdef APP-PLUS
						currentWebview: that.$mp.page.$getAppWebview(),
						// #endif
						url: 'xxxxxx', //你的上传附件接口地址
						name: 'file'
						},
					});
			},
         //上传成功
			upSuccess(res) {
				let url = res.root.url;
				let name = res.root.originalName;
				let fileType = this.isFileType(res.root.type);
				let size = res.root.size;
				if(fileType == 'image'){
					this.imgUploadList.push({url,name,fileType,size});
				}else{
					this.fileUploadList.push({url,name,fileType,size})
				}
			},
         //根据文件后缀名来判断,展示对应的图标
        isImage(type){
				return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
			},
			isDocx(type){
				return ['doc','docx'].includes(type.toLowerCase());
			},
			isXsls(type){
				return ['xsls','xsl'].includes(type.toLowerCase());
			},
			isText(type){
				return ['text','txt'].includes(type.toLowerCase());
			},
			isFileType(type){
				if(this.isImage(type)) return 'image';
				if(this.isXsls(type)) return 'excel';
				if(type == 'pdf') return 'pdf';
				if(this.isDocx(type)) return 'word';
				if(this.isText(type)) return "text";
				// return "#icon-file-b--6";
			},
           //文件预览
			previewFile(item){
				uni.downloadFile({
					url: item.url,
					success: (res) => {
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: (res) => {
								console.log('打开文档成功');
							}
						})
					}
				})
			},
  • 2
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
uni-app中,你可以使用uni.uploadFile方法来上传多个文件。首先,你需要将需要上传文件逐个进行遍历,并通过uni.uploadFile方法进行上传。 以下是一个示例代码: ```javascript // 定义一个数组,用于存储上传成功的文件路径 let uploadedFiles = []; // 遍历需要上传文件列表 for (let i = 0; i < fileList.length; i++) { let file = fileList[i]; // 使用uni.uploadFile方法进行文件上传 uni.uploadFile({ url: 'your_upload_url', // 替换为实际的上传接口地址 filePath: file.path, // 文件路径 name: 'file', // 对应后端接口中接收文件的字段名 formData: { // 其他参数 }, success: (res) => { // 上传成功,返回的数据在res.data中,可以根据需要进行处理 uploadedFiles.push(res.data); // 如果所有文件上传完成 if (uploadedFiles.length === fileList.length) { // 所有文件上传完成后的操作 console.log('所有文件上传完成'); console.log(uploadedFiles); } }, fail: (err) => { // 上传失败的处理逻辑 console.log('文件上传失败'); console.log(err); } }); } ``` 上述代码中,fileList是一个包含需要上传文件信息的数组,可以根据具体需求进行修改。在每次上传成功后,将返回的文件路径存储到uploadedFiles数组中。当所有文件上传完成后,可以在相应的位置进行处理。 请注意替换代码中的'your_upload_url'为实际的上传接口地址,并根据后端接口要求修改其他参数。 希望对你有所帮助!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值